<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/news.css" />
  </head>
  <body>
    <div id="news-list">
      <!-- <div class="news-item">
        <img class="thumb" src="" alt="" />
        <div class="right-box">
          <h1 class="title">5G商用在即，三大运营商营收持续下降</h1>
          <div class="tags">
            <span>三大运营商</span>
            <span>中国移动</span>
            <span>5G商用</span>
          </div>
          <div class="footer">
            <div>
              <span>胡润百富</span>&nbsp;&nbsp;
              <span>2019-10-28 10:14:38</span>
            </div>
            <span>评论数：66</span>
          </div>
        </div>
      </div> -->
    </div>
    <script src="./lib/jquery.js"></script>
    <script src="./lib/template-web.js"></script>
    <script src="./lib/moment.min.js"></script>
    <!-- 定义模版 -->
    <script type="text/html" id="new_template">
      {{ each data}}
      <div class="news-item">
        <img class="thumb" src="{{ $value.img | preFix}}" alt="" />
        <div class="right-box">
          <h1 class="title">{{ $value.title }}</h1>
          <div class="tags">
            <!-- 先将tags进行切割，再次进行遍历循环 -->
            {{each $value.tags.split(',')}}
            <!-- $value是处于当前作用域下的 -->
            <span>{{$value}}</span>
            {{/each}}
          </div>
          <div class="footer">
            <div>
              <span>{{ $value.source }}</span>&nbsp;&nbsp;
              <span>{{ $value.time | dateFormat}}</span>
            </div>
            <span>评论数：{{$value.cmtcount }}</span>
          </div>
        </div>
      </div>
      {{ /each }}
    </script>
    <script>
      const baseURL = `http://www.liulongbin.top:3006`
      template.defaults.imports.preFix = function (value) {
        return baseURL + value
      }
      template.defaults.imports.dateFormat = function (value) {
        // value是一个字符串 => Date
        return moment(new Date(value)).format("YYYY-MM-DD hh:mm:ss")
      }

      $.get(`${baseURL}/api/news`, (result) => {
        // result是我们的数据结构
        // const { data } = result
        // 获取到data数据
        document.querySelector("#news-list").innerHTML = template(
          "new_template",
          result
        )
      })
    </script>
  </body>
</html>
